<template>
  <div class="table-general-panel">
    <h3 class="text-sm font-medium text-gray-700 mb-4">表基本属性</h3>
    
    <div class="grid grid-cols-2 gap-4">
      <div class="space-y-1">
        <label class="block text-xs font-medium text-gray-500 mb-1">表名</label>
        <el-input 
          v-model="formData.name" 
          size="small" 
          placeholder="请输入表名" 
          @change="emitUpdate"
          class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all" 
        />
      </div>
      
      <!-- MySQL专用选项 -->
      <template v-if="databaseType === 'mysql'">
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">存储引擎</label>
          <el-select 
            v-model="formData.engine" 
            size="small" 
            style="width: 100%" 
            @change="emitUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="InnoDB" value="InnoDB" />
            <el-option label="MyISAM" value="MyISAM" />
            <el-option label="MEMORY" value="MEMORY" />
            <el-option label="ARCHIVE" value="ARCHIVE" />
            <el-option label="FEDERATED" value="FEDERATED" />
          </el-select>
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">字符集</label>
          <el-select 
            v-model="formData.charset" 
            size="small" 
            style="width: 100%" 
            @change="emitUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="utf8mb4" value="utf8mb4" />
            <el-option label="utf8" value="utf8" />
            <el-option label="latin1" value="latin1" />
            <el-option label="ascii" value="ascii" />
          </el-select>
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">排序规则</label>
          <el-select 
            v-model="formData.collation" 
            size="small" 
            style="width: 100%" 
            @change="emitUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="utf8mb4_general_ci" value="utf8mb4_general_ci" />
            <el-option label="utf8mb4_unicode_ci" value="utf8mb4_unicode_ci" />
            <el-option label="utf8_general_ci" value="utf8_general_ci" />
            <el-option label="utf8_unicode_ci" value="utf8_unicode_ci" />
            <el-option label="latin1_swedish_ci" value="latin1_swedish_ci" />
            <el-option label="ascii_general_ci" value="ascii_general_ci" />
          </el-select>
        </div>
      </template>
      
      <!-- PostgreSQL和SQL Server的schema选项 -->
      <div v-if="['postgresql', 'sqlserver'].includes(databaseType)" class="space-y-1">
        <label class="block text-xs font-medium text-gray-500 mb-1">Schema</label>
        <el-input 
          v-model="formData.schema" 
          size="small" 
          :placeholder="databaseType === 'postgresql' ? 'public' : 'dbo'" 
          @change="emitUpdate" 
          class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
        />
      </div>
      
      <div class="col-span-2 space-y-1">
        <label class="block text-xs font-medium text-gray-500 mb-1">表注释</label>
        <el-input 
          v-model="formData.comment" 
          type="textarea" 
          :rows="3" 
          placeholder="表注释" 
          @change="emitUpdate" 
          class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  tableData: {
    type: Object,
    required: true
  },
  databaseType: {
    type: String,
    default: 'mysql'
  }
});

const emit = defineEmits(['update']);

// 局部表单数据（为了不直接修改props）
const formData = ref({
  name: props.tableData.name || '',
  comment: props.tableData.comment || '',
  // MySQL特定属性
  engine: props.tableData.engine || 'InnoDB',
  charset: props.tableData.charset || 'utf8mb4',
  collation: props.tableData.collation || 'utf8mb4_general_ci',
  // PostgreSQL/SQL Server特定属性
  schema: props.tableData.schema || (props.databaseType === 'postgresql' ? 'public' : 'dbo')
});

// 监听props变化
watch(() => props.tableData, (newData) => {
  formData.value.name = newData.name || '';
  formData.value.comment = newData.comment || '';

  if (props.databaseType === 'mysql') {
    formData.value.engine = newData.engine || 'InnoDB';
    formData.value.charset = newData.charset || 'utf8mb4';
    formData.value.collation = newData.collation || 'utf8mb4_general_ci';
  } else if (['postgresql', 'sqlserver'].includes(props.databaseType)) {
    formData.value.schema = newData.schema || (props.databaseType === 'postgresql' ? 'public' : 'dbo');
  }
}, { deep: true });

// 发送更新
const emitUpdate = () => {
  const updateData = {
    name: formData.value.name,
    comment: formData.value.comment
  };
  
  if (props.databaseType === 'mysql') {
    updateData.engine = formData.value.engine;
    updateData.charset = formData.value.charset;
    updateData.collation = formData.value.collation;
  } else if (['postgresql', 'sqlserver'].includes(props.databaseType)) {
    updateData.schema = formData.value.schema;
  }
  
  emit('update', updateData);
};
</script>

<style scoped>
.table-general-panel {
  padding: 16px 0;
}

:deep(.el-input__wrapper) {
  @apply shadow-none rounded-md;
}

:deep(.el-input__wrapper:hover) {
  @apply border-gray-400;
}

:deep(.el-input__wrapper.is-focus) {
  @apply border-blue-500 ring-1 ring-blue-500;
}

:deep(.el-select .el-input__wrapper) {
  @apply shadow-none;
}

:deep(.el-select-dropdown__item) {
  @apply text-sm py-2;
}

:deep(.el-textarea__inner) {
  @apply rounded-md border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all;
}

:deep(.el-textarea__inner:hover) {
  @apply border-gray-400;
}
</style> 